<!--
 * @Description: testAssessment - 做题评估
 * @Author: your name
 * @Date: 2024-02-23
 * @LastEditTime: 2024-02-23
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/questionBank' }">
        题库
      </el-breadcrumb-item>
      <el-breadcrumb-item>做题评估</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="accuracy">
      <div class="left">
        <h5 class="commonTit">习题准确率</h5>
        <el-progress
          type="circle"
          color="#0193ff"
          :width="100"
          :percentage="20"
        ></el-progress>
        <div class="instru">
          <p>正确率</p>
          <p>错误率</p>
        </div>
      </div>
      <div class="right">
        <h5 class="commonTit">科目列表</h5>
        <div class="subjects" v-for="(item, index) in 13" :key="index">
          <div class="item">
            <p class="name">Quantitative Methods Topic Test</p>
            <div class="rightInfo">
              <p>总题数：<span>23</span></p>
              <p>做题数：<span>0</span></p>
              <p>正确率：<span>02%</span></p>
              <a href="javascript:void(0)" @click="zuoti">去做题</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="testSituation">
      <div class="commonTit">测试情况</div>
      <div class="table">
        <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%; text-align: center"
        >
          <el-table-column type="index" label="序号" width="80">
            <template slot-scope="scope">
              <div class="tableIndex">
                {{ scope.$index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="试卷名称" width="243">
          </el-table-column>
          <el-table-column prop="duration" label="考试时长">
            <template slot-scope="scope">
              {{ scope.row.duration }}分钟
            </template>
          </el-table-column>
          <el-table-column prop="use_time" label="做题时长"> </el-table-column>
          <el-table-column prop="accuracy" label="做题准确率">
          </el-table-column>
          <el-table-column label="排行榜">
            <template slot-scope="scope">
              <div class="toInfo" @click="openRank(scope)">查看排行</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="knowledgeRank">
      <div class="knowledges">
        <div class="commonTit">薄弱知识点</div>
        <div class="collapse">
          <div class="collapseItem" v-for="(item, index) in 1" :key="index">
            <div class="tit">
              <p>2024 Level II</p>
            </div>
            <div class="innerCollapse" v-for="(e, i) in 2" :key="i">
              <div class="item">
                <div class="innerTit" @click="childShow = !childShow">
                  <p>00</p>
                  <span>123</span>
                </div>
                <div class="childList" v-if="childShow">
                  <div class="itemCon" v-for="(j, z) in 3" :key="z">
                    <div class="left" v-for="(a, c) in j" :key="c">
                      <p>ffffffff</p>
                    </div>
                    <div class="right">
                      <a href="javascript:void(0)">去学习</a>
                      <a href="javascript:void(0)"> 去做题 </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rank">
        <div class="commonTit">答题排行榜</div>
        <div class="list">
          <div class="item isMe">
            <div class="rankNum">
              <div class="inner">你</div>
            </div>
            <div class="avatar">
              <!-- <img :src="myRank.avatar" alt="" /> -->
            </div>
            <div class="text">
              <p>她.</p>
              <p>连续学习天数：22天</p>
            </div>
            <span class="isMe">我</span>
          </div>
          <div class="item" v-for="(item, index) in 2" :key="index">
            <div class="avatar">
              <img
                src="https://img.rongyuejiaoyu.com/uploads/20240127/11061587434.jpg"
                alt=""
              />
            </div>
            <div class="text">
              <p>178****1392</p>
              <p>连续学习天数：12天</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 排行榜 -->
    <div class="rankDialog" v-if="dialogShow">
      <div class="innerCon">
        <h5 class="tit">排行榜</h5>
        <div class="list" v-for="(item, index) in 2" :key="index">
          <div class="item isMe">
            <div class="rankNum">
              <div class="inner">102</div>
            </div>
            <div class="avatar"></div>
            <div class="info">
              <p>139****9845</p>
              <p>答题量：1007道 &nbsp;&nbsp;交卷时间：2021-05-12 14:12:44</p>
            </div>
          </div>
        </div>
        <img
          class="closeBtn"
          @click="dialogShow = false"
          src="@/assets/images/logo_close.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'testAssessment',
  data() {
    return {
      Arrtest: [],
      dialogShow: false,
      tableData: [
        {
          ai_id: 105,
          name: '信用风险（补充题目）',
          use_time: 1,
          duration: 240,
          accuracy: '6.00',
          time: 1653027343,
          type: 2
        },
        {
          ai_id: 105,
          name: '信用风险（补充题目）',
          use_time: 1,
          duration: 240,
          accuracy: '0.00',
          time: 1686638477,
          type: 2
        },
        {
          ai_id: 105,
          name: '信用风险（补充题目）',
          use_time: 1,
          duration: 240,
          accuracy: '4.00',
          time: 1700469474,
          type: 2
        },
        {
          ai_id: 138,
          name: '市场风险【科目测试题】',
          use_time: 1,
          duration: 0,
          accuracy: '0.00',
          time: 1708681197,
          type: 2
        },
        {
          ai_id: 109,
          name: '操作风险（补充题目）',
          use_time: 1,
          duration: 240,
          accuracy: '3.00',
          time: 1708927999,
          type: 2
        }
      ],
      childShow: false
    }
  },
  created() {},
  methods: {
    zuoti() {
      this.$router.push({
        path: 'questionBank',
        query: {}
      })
    },
    openRank() {
      this.dialogShow = true
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
@import '@/assets/styles/testAssessment.scss';

.el-breadcrumb {
  font-size: 15px;
  line-height: 2;
}
.item img {
  width: 100%;
  height: 100%;
}

.accuracy {
  .right {
    overflow: auto;
  }
}
</style>
